.fbtn {
	background-color: $black-bg;
	border-radius: 50%;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
	clear: both;
	color: $black-text;
	cursor: pointer;
	display: block;
	font-size: $line-height;
	height: $fbtn-height;
	margin: $margin-sm auto;
	padding: (($fbtn-height - $line-height) / 2) 0;
	position: relative;
	text-align: center;
	transition: all 0.3s $timing;
	transition-property: box-shadow, opacity, transform;
	width: $fbtn-height;
}

a.fbtn {
	&:focus,
	&:hover {
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 3px 15px rgba(0, 0, 0, 0.5);
		color: $black-text;
	}
}

// colour
	@each $color in $palette-list {
		$i: index($palette-list, $color);

		.fbtn-#{$color} {
			background-color: nth($palette-color, $i);
			color: $white !important;
		}
	}

// size
	.fbtn-lg {
		height: ($fbtn-height + $base * 2);
		padding-top: (($fbtn-height + $base * 2 - $line-height) / 2);
		padding-bottom: (($fbtn-height + $base * 2 - $line-height) / 2);
		width: ($fbtn-height + $base * 2);
		.fbtn-sub {
			// position
				top: (($fbtn-height + $base * 2 - $line-height) / 2);
		}
		~ .fbtn-dropdown {
			min-width: ($fbtn-height + $base * 2 + $grid-gutter * 2);
		}
	}

.fbtn-container {
	backface-visibility: hidden;
	position: fixed;
		right: $grid-gutter;
		bottom: $margin-sm;
	transition: margin-bottom 0.3s $timing, right 0.3s $timing;
	z-index: ($content-base + 1);
}

.fbtn-dropdown {
	max-height: 0;
	overflow: hidden;
	padding-right: $grid-gutter;
	padding-left: $grid-gutter;
	position: absolute;
		right: ($grid-gutter * -1);
		bottom: 100%;
	transition: max-height 0s 0.5s;
	.fbtn-inner.open & {
		max-height: 99999px;
		overflow: visible;
		transition: max-height 0s;
	}
	.fbtn {
		opacity: 0;
		transform: scale(0.5, 0.5);
		&:nth-last-child(1) {
			transition-delay: 300ms;
		}
		&:nth-last-child(2) {
			transition-delay: 250ms;
		}
		&:nth-last-child(3) {
			transition-delay: 200ms;
		}
		&:nth-last-child(4) {
			transition-delay: 150ms;
		}
		&:nth-last-child(5) {
			transition-delay: 100ms;
		}
		&:nth-last-child(6) {
			transition-delay: 50ms;
		}
		.fbtn-inner.open & {
			opacity: 1;
			transform: scale(1, 1);
			transition-delay: 300ms;
			&:nth-last-child(1) {
				transition-delay: 0s;
			}
			&:nth-last-child(2) {
				transition-delay: 50ms;
			}
			&:nth-last-child(3) {
				transition-delay: 100ms;
			}
			&:nth-last-child(4) {
				transition-delay: 150ms;
			}
			&:nth-last-child(5) {
				transition-delay: 200ms;
			}
			&:nth-last-child(6) {
				transition-delay: 250ms;
			}
		}
	}
}

.fbtn-ori,
.fbtn-sub {
	transition: all 0.3s $timing;
	transition-property: opacity, transform;
	&.#{$mdicon-css-prefix} {
		vertical-align: bottom;
	}
}

.fbtn-ori {
	.fbtn-inner.open & {
		opacity: 0;
		transform: rotate(225deg);
	}
}

.fbtn-rotate {
	transition: all 0.3s $timing;
	transition-property: opacity, transform;
	.fbtn-inner.open & {
		transform: rotate(225deg);
	}
}

.fbtn-sub {
	opacity: 0;
	position: absolute;
		top: (($fbtn-height - $line-height) / 2);
		left: 0;
	text-align: center;
	transform: rotate(-225deg);
	width: 100%;
	.fbtn-inner.open & {
		opacity: 1;
		transform: rotate(0);
	}
}

.fbtn-text {
	background-color: $black-text;
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 2px;
	color: $white;
	font-size: $font-size-h6;
	height: 0;
	line-height: $line-height;
	margin-top: ($line-height / -2);
	margin-right: $grid-gutter;
	opacity: 0;
	overflow: hidden;
	padding-right: ($grid-gutter / 2);
	padding-left: ($grid-gutter / 2);
	position: absolute;
		top: 50%;
		right: 100%;
	transition: opacity 0.3s $timing;
	white-space: nowrap;
	width: 0;
	// touch & no touch
		.no-touch .fbtn:hover & {
			height: auto;
			opacity: 1;
			width: auto;
		}
		.no-touch .fbtn-dropdown .fbtn:hover & {
			height: 0;
			opacity: 0;
			width: 0;
		}
		.no-touch .fbtn-inner.open .fbtn-dropdown .fbtn:hover & {
			height: auto;
			opacity: 1;
			width: auto;
		}
		.touch & {
			display: none;
			height: auto;
			opacity: 1;
			width: auto;
		}
		.touch .fbtn-inner.open & {
			display: block;
		}
}
